<template>
  <div class="climate">

    <div class="main-container">

      <div class="left-menu">
        <div>
          <el-input
              v-model="input1"
              style="max-width: 600px"
              placeholder="Please input"
          >
            <template #prepend>输入国家站号</template>
          </el-input>
        </div>
        <div>
          <el-input
              v-model="input1"
              style="max-width: 600px"
              placeholder="Please input"
          >
            <template #prepend>输入国家站号</template>
          </el-input>
        </div>
        <div>
          <el-input
              v-model="input1"
              style="max-width: 600px"
              placeholder="Please input"
          >
            <template #prepend>输入国家站号</template>
          </el-input>
        </div>
      </div>

      <div class="right-content">
        <vue-office-docx
            :src="fileName"
            style="height: calc(100vh - 130px);"
            @rendered="rendered"
        />
      </div>

    </div>




  </div>
</template>

<script lang="ts" setup>
import {onMounted, ref} from 'vue'
import VueOfficeDocx from '@vue-office/docx'
import '@vue-office/docx/lib/index.css'
import {getFile} from "../../utils/api";

const value1 = ref('')
const value2 = ref('')
let fileName = ref<any>()
const input1 = ref('')
async function getFileName(){
  await fetch('/test/download/44.docx', {
    method: 'get'
  }).then(res=>{
    //读取文件的arrayBuffer
    res.arrayBuffer().then(res=>{
      fileName.value = res
    })
  })
}
function rendered(){
  console.log("渲染完成")
}
onMounted(()=>{
  getFileName()

})

</script>
<style scoped>

.main-container{
  display: flex;
  justify-content: space-between; /* 水平分布 */
  overflow-y: auto; /* 允许垂直滚动 */
}
.left-menu{
  display: flex;
  flex-direction: column;
  width: 300px;
  padding: 16px;
  background:  #f2f2f2;
}

.right-content{
  margin-left: 10px;
  flex: 5;
}
.el-input-group{
  margin-bottom: 10px;
}
.input-with-select .el-input-group__prepend {
  background-color: var(--el-fill-color-blank);
}
</style>